/**
 * @summary: 包含二级菜单操作的悬浮按钮，满足二级菜单需求
 * @author: lixinxiang@vv.cn
 */

import React from 'react';
import { Menu, Popover, Icon } from 'antd';
import { router, withRouter } from 'umi';
import BizIcon from '@/components/BizIcon';
import styles from './fab.less';
import Draggable from './Draggable';

const FAB = ({ onClick, location }) => {
    const handleClick = () => {
        const { pathname } = location;
        const to = '/personal/feedbacks';
        if (pathname === to) {
            return;
        }
        history.push({
            pathname: to,
            state: { tabRoute: true }
        });
    };

    const menu = (
        <Menu className={styles.menu}>
            <Menu.Item onClick={onClick}>
                <Icon type="edit" theme="filled" />
                意见反馈
            </Menu.Item>
            <Menu.Item onClick={handleClick}>
                <Icon type="profile" theme="filled" />
                查看我所有的反馈
            </Menu.Item>
        </Menu>
    );
    return (
        <Popover content={menu} placement="left" overlayClassName={styles.popover}>
            <Draggable className={styles.wrap}>
                <BizIcon type="gms_feedback_btn_feedback_default" style={{ fontSize: 24 }} />
            </Draggable>
        </Popover>
    );
};

export default withRouter(FAB);
